<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-switch v-model="value"></sdn-switch>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      value: true
    }
  },
  methods: {},
  setup() {
    const btnDesc = {
      title: "Switch 开关",
      describe: "表示两种相互对立的状态间的切换，多用于触发「开/关」。",
      codeBlock: `<sdn-switch v-model="value"></sdn-switch>`,
      attrs: [
        {
          "name": "value / v-model",
          "describe": "绑定值",
          "type": "boolean / string / number",
          "emun": "—",
          "default": "—"
        }, {"name": "disabled", "describe": "是否禁用", "type": "boolean", "emun": "—", "default": "FALSE"}, {
          "name": "width",
          "describe": "switch 的宽度（像素）",
          "type": "number",
          "emun": "—",
          "default": "40"
        }, {
          "name": "active-icon-class",
          "describe": "switch 打开时所显示图标的类名，设置此项会忽略 active-text",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "inactive-icon-class",
          "describe": "switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "active-text",
          "describe": "switch 打开时的文字描述",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "inactive-text",
          "describe": "switch 关闭时的文字描述",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "active-value",
          "describe": "switch 打开时的值",
          "type": "boolean / string / number",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "inactive-value",
          "describe": "switch 关闭时的值",
          "type": "boolean / string / number",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "active-color",
          "describe": "switch 打开时的背景色",
          "type": "string",
          "emun": "—",
          "default": "#409EFF"
        }, {
          "name": "inactive-color",
          "describe": "switch 关闭时的背景色",
          "type": "string",
          "emun": "—",
          "default": "#C0CCDA"
        }, {
          "name": "name",
          "describe": "switch 对应的 name 属性",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "validate-event",
          "describe": "改变 switch 状态时是否触发表单的校验",
          "type": "boolean",
          "emun": "-",
          "default": "TRUE"
        }],
      events: [{"name": "change", "describe": "switch 状态发生变化时的回调函数", "params": "新状态的值"}],
      methods: [{"name": "focus", "describe": "使 Switch 获取焦点", "params": "-"}]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
